<template>
  <div class="container">
    <span class="logo" @click="GoHome">
      <img src="@/static/img/logo.svg" alt />
    </span>
    <ul class="ul">
      <li
        @click="Change(val,index)"
        :class="{Active:index===Current?true:''}"
        v-for="(val,index) in item"
        :key="index"
      >
        <NuxtLink :to="val.type==='to'?val.to:''">{{val.title}}</NuxtLink>
      </li>
      <div class="clear" />
    </ul>
    <ul class="ulRight">
      <!-- <li>
        <a-select :defaultValue="defaultValue" style="width: 120px" @change="handleChange">
          <a-select-option value="zhCN">中文</a-select-option>
          <a-select-option value="en_GB">英文</a-select-option>
        </a-select>
      </li>-->
      <li>
        <a-dropdown>
          <a class="ant-dropdown-link" href="#">
            admin
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay" @click="ClickMenu">
            <a-menu-item key="logout">退出</a-menu-item>
          </a-menu>
        </a-dropdown>
      </li>
      <div class="clear" />
    </ul>
    <div class="clear" />
    <a-drawer :title="title" :placement="placement" @close="Close()" :visible="visible">
      <div>内容展示</div>
    </a-drawer>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { namespace } from "vuex-class";
import { Adropdown } from "../../models/HomePage";
const module = namespace("authentication");

@Component({
  name: "layout-Header"
})
export default class OrhonHeader extends Vue {
  @Prop({ type: Array, required: true }) value!: any[];
  @module.Getter("getToken") getToken;
  title: string = "默认";
  visible: boolean = false;
  placement: string = "top";
  item: any[] = this.value;
  Current: number = 0;
  handleChange(value: string): void {
    const _this: any = this;
    _this.$store.$cookies.set("local", value);
  }
  ClickMenu(value: Adropdown): void {
    const _this: any = this;
    if (value.key === "logout") {
      this.$store.commit("authentication/setUserInfo", "");
      this.$store.commit("authentication/setToken", "");
      _this.$store.$cookies.remove("token");
    }
  }
  Change(val: any, index: number) {
    this.Current = index;
    if (val.type === "supernatant") {
      this.title = val.title;
      this.visible = true;
    }
  }
  Close() {
    this.visible = false;
  }
  GoHome() {
    const _this: any = this;
    _this.$router.push({
      name: "index"
    });
  }
  @Watch("getToken")
  userInfow(newValue: string, oldValue: string): void {
    if (!newValue) {
      const _this: any = this;
      _this.$router.push("/login");
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  .logo {
    float: left;
    margin-right: 50px;
    img {
      width: 150px;
    }
    cursor: pointer;
  }
  .ul {
    float: left;
    li {
      float: left;
      width: 100px;
      text-align: center;
      list-style: none;
      height: 60px;
    }
    a {
      display: inline;
      font-size: 14px;
      text-decoration: none;
    }
  }
  .clear {
    clear: both;
  }
  .ulRight {
    float: right;
    li {
      float: left;
      list-style: none;
      margin-left: 20px;
    }
  }
  .Active {
    border-bottom: 2px solid #2d8cf0;
  }
}
</style>